import React,{Component,Fragment} from 'react';
import TodoItem from './Todoitem';
import axios from 'axios';
import Text from './test';
import './style.css'
class TodoList extends Component { //瑞哎的React 瑞达克斯 Redux
 	constructor(props){ // 啃食踹咳得 默认的 优于其他先执行
		super(props)
		this.state={
			inputValue:"",
			list:[],
			com:[]
		}
		this.handleInputChange=this.handleInputChange.bind(this)
		this.handleBtnClick=this.handleBtnClick.bind(this)
		this.handleDelete=this.handleDelete.bind(this)
	}	
	render(){//软的
		console.log("render")
		return (
			<Fragment>
			{/*input*/}
				<div>
					<label htmlFor="inser">输入内容</label>
					<input value={this.state.inputValue} className="input"
						onChange={this.handleInputChange} id="inser" ref={(input)=>{this.input=input}}/> 
					<button onClick={this.handleBtnClick}>提交</button>
				</div>
				<ul ref={(ul)=>{this.ul=ul}}>{this.getTodoItem()}</ul>
				<Text content={this.state.inputValue} />
			</Fragment>
		  );
		}
	
	componentWillMount() {//在组件即将被挂载到页面的时候执行
    console.log("componentWillMount")
  }
	componentDidMount(){//在组件被挂载到页面之后，自动执行 ajax
		axios.get("https://api.apiopen.top/likePoetry?name")
		.then((res)=>{
			console.log("res",res)
				this.setState((pre)=>{//新版
					return {
						com:res.data.data
					}
				})
		})
		.catch((err)=>{console.log("err",err)})
	}//组件被更新之前，他会自动被执行 =>wp
	shouldComponentUpdate(nextProps, nextState){
		console.log("shouldComponentUpdate")
		return true
	}//${wp} 之后执行 ture执行 false不执行
	componentWillUpdata(nextProps, nextState){
		console.log("componentWillUpdata")
	}
	componentWillUpdata(nextProps, nextState){
		console.log("chind-componentWillUpdata")
	}//一个组件从父组件接受参数
	//只要父组件的render生命周期重新执行，子组件的就会执行
	//如果这个组件第一次存在于父组件中 不会执行
	//如果这个组件之前已经存在于父组件中，才会执行
	componentWillReceiveProps(nextProps){
		console.log("componentWillReceiveProps")
	}
	
	getTodoItem(){//html
		return this.state.list.map((item,index)=>{
			return (
				// <div  key={index}>
					<TodoItem content={item} index={index}
					 deleteItem={this.handleDelete} key={index}
					/>
				// </div>
			)
		})
	}
	
	handleInputChange(e){//setdeom
	const value=e.target.value
	this.setState((pre)=>{//新版
		return {
			inputValue:value
		}
	})
	// this.setState({//老版
	// 	inputValue:e.target.value
	// })
	}
	handleBtnClick(e){//add prevState
		this.setState((pre)=>{
			return {
				list:[...pre.list,pre.inputValue],
				inputValue:""
			}
		},()=>{//异步执行数据
			console.log(this.ul.querySelectorAll('div').length)
		})
	}
	handleDelete(index,e){//del
			// const list=[...this.state.list]
			// list.splice(index,1)
			this.setState((pre)=>{
				const list=[...pre.list]
				list.splice(index,1)
				return {
					list
				}
			},()=>{//异步执行数据
				console.log("删除数据")
			})
		}
	}
export default TodoList;

// https://www.cnblogs.com/qiaojie/p/6135180.html

// import React from 'react';
// import {Fragment} from 'react';//占未符
// function TodoList() {
// 	
//   return (
//     <Fragment>
// 				<input/> <button>三生三世</button>
// 				<ul>
// 					<li>学英语</li>
// 					<li>学英语222</li>
// 				</ul>
//     </Fragment>
//   );
// }
// 
// export default TodoList;
// 
